<template>
    <div class="cart-sku" ref="target">
      <div class="attrs" @click="toggle()">
        <span class="ellipsis-1">{{ goods_sepc_option_text }}</span>
        <i class="iconfont icon-xiajiantou"></i>
      </div>

      <div class="layer-wrap" v-if="visible">
        <GoodsSku @change="changeSku" v-if="goodsSkuList.length > 0" :skuId="skuId" :goodsSkuImg="goodsSkuImg" :goodsOptions="goodsOptions" :goodsSkus="goodsSkuList"/>
          <div class="btn-wrap">
            <el-button v-if="goodsSkuList.length > 0" @click="visible = false">取消</el-button>
            <el-button v-if="goodsSkuList.length > 0" type="primary" @click="submit()">确认</el-button>
          </div>
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { reqGetGoodsSkuListAPI } from '@/apis/goods'
import GoodsSku from '@/views/goods-detail/components/GoodsSku.vue';

const props = defineProps({
    goods_id: {
      type: Number,
      default: () => 0
    },
    goods_sepc_option_text: {
      type: String,
      default: ''
    },
    skuId: {
      type: Number,
      default: ''
    },
	goodsSkuImg: {
      type: String,
      default: ''
    }
})

const visible = ref(false)
const goodsSkuList = ref([])
const goodsOptions = ref([])
const show = async () => {
  const result = await reqGetGoodsSkuListAPI({goods_id: props.goods_id, page_size: -1, is_have_goods_option: 1})
  if (result.code == 200) {
    goodsSkuList.value = result.data.goods_sku_items != null ? result.data.goods_sku_items : []
    goodsOptions.value = result.data.goods_options != null ? result.data.goods_options : []
    visible.value = true
  }
}
const hide = () => {
  visible.value = false
  goodsSkuList.value = []
}
const toggle = () => {
  visible.value ? hide() : show()
}
const target = ref(null)
onClickOutside(target, () => {
  hide()
})

// 选择SKU时候触发
const currSku = ref(null)
const changeSku = (sku) => {
  currSku.value = sku
}


// 点击确认的时候，提交sku信息给购物车组件
const emit = defineEmits(['change'])
const submit = () => {
  // 给购物车组件数据的前提：有sku信息，sku信息完整，sku中的skuId不能现有props.skuId一样
  if (currSku.value && currSku.value.skuId && currSku.value.skuId !== props.skuId) {
      emit('change', currSku.value)
  }
  hide()
}
</script>

<style scoped lang="scss">
  .cart-sku {
    height: 28px;
    border: 1px solid #f5f5f5;
    padding: 0 6px;
    position: relative;
    margin-top: 10px;
    display:inline-block;
    cursor: pointer;
    .attrs {
      line-height: 24px;
      display: flex;
      span {
        max-width: 230px;
        font-size: 14px;
        color: #999;
      }
      i {
        margin-left: 5px;
        font-size: 14px;
      }
    }
    .layer-wrap {
      position: absolute;
      left: -1px;
      top: 40px;
      z-index: 10;
      width: 1000px;
      border: 1px solid $main-color;
      box-shadow: 2px 2px 4px lighten($main-color,50%);
      background: #fff;
      border-radius: 4px;
      font-size: 14px;
      padding: 20px;
      &::before {
        content: "";
        width: 12px;
        height: 12px;
        border-left: 1px solid $main-color;
        border-top: 1px solid $main-color;
        position: absolute;
        left: 12px;
        top: -8px;
        background: #fff;
        transform: scale(.8,1) rotate(45deg);
      }
      .btn-wrap {
        text-align: right;
      }
    }
  }
</style>